<template>
    <div class="detail-page">
      <navHeader></navHeader>
      <div class="product-detail" v-if="product">
        <img :src="product.image" alt="Product Image" class="product-image" />
        <h2 class="product-name">{{ product.name }}</h2>
        <p class="product-price">价格: {{ product.price }} 元</p>
        <p class="product-description">{{ product.description }}</p>
        <van-button round block type="info" @click="addToCart">加入购物车</van-button>
      </div>
      <div v-else>
        加载中...
      </div>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  
  export default {
    components: {
      navHeader: () => import("../components/backheader.vue")
    },
    data() {
      return {
        product: null
      };
    },
    created() {
      const productId = this.$route.params.id;
      this.fetchProduct(productId);
    },
    methods: {
      fetchProduct(id) {
        this.$axios.get(`https://h5.mcake.com/api/product/${id}`)
          .then(res => {
            console.log(res, '请求成功');
            this.product = res.data;
          })
          .catch(err => {
            console.log(err, '请求失败');
            Toast.fail('加载商品信息失败');
          });
      },
      addToCart() {
        Toast.success('已加入购物车');
        // 这里可以添加将商品添加到购物车的逻辑
      }
    }
  };
  </script>
  
  <style scoped>
  .product-detail {
    padding: 16px;
    text-align: center;
  }
  
  .product-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
  }
  
  .product-name {
    font-size: 20px;
    margin: 16px 0;
  }
  
  .product-price {
    font-size: 18px;
    color: #ff6700;
    margin: 8px 0;
  }
  
  .product-description {
    font-size: 14px;
    color: #666;
    margin: 16px 0;
  }
  </style>